<template>
  <Wrapper>
    <el-row :gutter="20">
      <el-col :lg="4">
        <department-tree :list="departmentList" />
      </el-col>
      <el-col :lg="20">
        <card-form class="card-form" label-width="60">
          <el-row :gutter="20">
            <col-wrapper label="姓名" :lg="6">
              <el-input placeholder="请输入姓名"></el-input>
            </col-wrapper>
            <col-wrapper label="部门" :lg="6">
              <el-select placeholder="请选择部门"></el-select>
            </col-wrapper>
            <col-wrapper label="类型" :lg="6">
              <el-select placeholder="请选择用户类型"></el-select>
            </col-wrapper>
            <col-wrapper class="col-wrapper__btn" :lg="6">
              <el-button>重置</el-button>
              <el-button type="primary">搜索</el-button>
            </col-wrapper>
          </el-row>
        </card-form>
        <el-card shadow="never" class="card-box">
          <div class="table-header flex">
            <span style="color: var(--el-text-color-regular)"
              >共{{ tableData.length }}条数据</span
            >
            <el-space wrap :size="5">
              <el-button type="primary" size="small" icon="Plus" class="add-btn"
                >新增用户</el-button
              >
              <el-tooltip content="刷新" placement="top">
                <icon name="Refresh" @click="loadData" />
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-tooltip content="设置" placement="top">
                <icon name="Setting" />
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-tooltip content="下载数据" placement="top">
                <icon name="Download" @click="download" />
              </el-tooltip>
            </el-space>
          </div>

          <user-table :data="tableData" />
        </el-card>
      </el-col>
    </el-row>
  </Wrapper>
</template>

<script setup>
import { getDepartmentList } from '@/apis/system'
import { getUserList } from '@/apis/user'
import { parseTime } from '@/utils/utils'
import CardForm from '@/components/wrapper/card-form'
import ColWrapper from '@/components/wrapper/col'
import UserTable from './components/user-table'
import DepartmentTree from './components/department-tree'

const tableData = ref([])
const departmentList = ref([])

onMounted(() => loadData())

function download() {
  import('@/plugins/export-excel').then((excel) => {
    const tHeader = ['姓名', '部门', '手机号', '性别', '密码']
    const filterVal = ['name', 'departmentName', 'phone', 'sex', 'password']
    const data = formatJson(filterVal, tableData.value)

    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: '用户列表',
    })
  })
}

async function loadData() {
  const res = await getDepartmentList()
  const resp = await getUserList()

  departmentList.value = res.list
  tableData.value = resp.list
}

function formatJson(filterVal, jsonData) {
  return jsonData.map((v) =>
    filterVal.map((j) => {
      if (j === 'timestamp') {
        return parseTime(v[j])
      } else {
        return v[j]
      }
    }),
  )
}
</script>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  padding-bottom: 20px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--el-border-color) !important;
}

:deep(.el-form-item__content > .el-image) {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

:deep(.form-card__content) {
  margin-bottom: 0;
}

.card-form {
  margin-top: 0;
}

.col-wrapper__btn {
  display: flex;
  justify-content: flex-end;
}

.table-header {
  width: 100%;
  justify-content: space-between;
  margin-bottom: $space-small-s;
}

.add-btn {
  margin-right: $space-small-s;
}
</style>
